{% extends "app/base_site.html" %}

{% block title %} 布控管理 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
<style>
    /* 布控管理页面样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .xc_container {
        color: #333;
        line-height: 1.6;
        margin: 0 auto;
        padding: 10px 20px;
    }

    /* 工具栏 */
    .xc_toolbar {
        background: white;
        border-radius: 8px;
        padding: 12px 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .xc_page-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: #1D2129;
        gap: 6px;
        white-space: nowrap;
    }
    
    .xc_page-title i {
        margin-right: 0;
        font-size: 18px;
        color: #165DFF;
    }
    
    .xc_search-input {
        width: 180px;
        min-width: 120px;
        padding: 0 10px;
        font-size: 13px;
        border: 1px solid #E5E6EB;
        border-radius: 6px;
        transition: all 0.2s;
        outline: none;
        height: 32px !important;
        line-height: 32px;
        box-sizing: border-box;
        vertical-align: middle;
       margin-bottom: 5px;
    }
    
    .xc_search-input:focus {
        border-color: #165DFF;
        box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
    }
    
    .xc_search-input::placeholder {
        color: #C9CDD4;
    }
    
    .xc_status-filter {
        padding: 0 28px 0 10px;
        font-size: 13px;
        border: 1px solid #E5E6EB;
        border-radius: 6px;
        transition: all 0.2s;
        background: white;
        color: #4E5969;
        cursor: pointer;
        outline: none;
        min-width: 100px;
        height: 32px !important;
        line-height: 32px;
        box-sizing: border-box;
        vertical-align: middle;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234E5969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 12px;
       margin-bottom: 5px;
    }
    
    .xc_status-filter:hover {
        border-color: #165DFF;
    }
    
    .xc_status-filter:focus {
        border-color: #165DFF;
        box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
    }
    

    .xc_header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .xc_btn-modern {
        padding: 0 10px;
        font-size: 13px;
        font-weight: 400;
        border-radius: 6px;
        border: 1px solid #E5E6EB;
        background: #F2F3F5;
        color: #4E5969;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
        text-decoration: none;
        flex-shrink: 0;
        height: 32px;
        line-height: 1;
        box-sizing: border-box;
        vertical-align: middle;
    }
    
    .xc_btn-modern:hover {
        background: #E5E6EB;
        border-color: #C9CDD4;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .xc_btn-modern:active {
        transform: translateY(0);
    }
    
    .xc_btn-modern.danger {
        color: #F53F3F;
    }
    
    .xc_btn-modern.danger:hover {
        background: #FFECE8;
        border-color: #FFCCC7;
        color: #D03050;
    }
    
    /* Loading动画 */
    .xc_loading-spinner {
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 2px solid #E5E6EB;
        border-top-color: #165DFF;
        border-radius: 50%;
        animation: xc_spin 0.6s linear infinite;
        margin-right: 5px;
    }
    
    @keyframes xc_spin {
        to { transform: rotate(360deg); }
    }
    
    .xc_loading-text {
        color: #6b7280;
        font-size: 12px;
    }

    /* 空状态 */
    .xc_empty-state {
        text-align: center !important;
        padding: 80px 20px !important;
        color: #9ca3af !important;
        display: block !important;
    }
    
    .xc_empty-state i {
        font-size: 64px !important;
        color: #d1d5db !important;
        margin-bottom: 16px !important;
        display: block !important;
    }
    
    .xc_empty-state p {
        font-size: 14px !important;
        margin: 0 !important;
        display: block !important;
    }

    /* 摄像头组 */
    .xc_camera_groups {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: white;
        border-radius: 6px;
        min-height: 200px;
    }

    .xc_group {
        background-color: #FFFFFF;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .xc_group:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
    
    .xc_group_header {
        padding: 16px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        background: linear-gradient(to right, #fafafa 0%, #ffffff 100%);
        border-bottom: 1px solid #e8e8e8;
    }
    
    .xc_group_title {
        display: flex;
        font-size: 15px;
        font-weight: 500;
        align-items: center;
        gap: 10px;
        flex: 1;
    }
    
    /* 状态指示器容器 */
    .xc_stream_status_container {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    /* 播放按钮美化 */
    .xc_play_btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 0;
        color: #059669;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
    }
    
    .xc_play_btn:hover {
        color: #047857;
        text-decoration: none;
    }
    
    .xc_play_btn i {
        font-size: 14px;
    }
    
    /* 离线状态美化 */
    .xc_offline_status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 0;
        color: #dc2626;
        font-size: 13px;
        font-weight: 500;
    }
    
    .xc_offline_status i {
        font-size: 14px;
    }
    
    /* 流名称美化 */
    .xc_group_title_a {
        color: #1d2129;
        text-decoration: none;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
        position: relative;
        padding: 0 4px;
    }
    
    .xc_group_title_a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 0;
        background: linear-gradient(135deg, #165DFF, #4080ff);
        border-radius: 2px;
        transition: height 0.2s;
    }
    
    .xc_group_title_a:hover {
        color: #165DFF;
        text-decoration: none;
        padding-left: 10px;
    }
    
    .xc_group_title_a:hover::before {
        height: 16px;
    }

    /* 计数徽章美化 */
    .xc_group_count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 8px;
        background: #f2f3f5;
        color: #4e5969;
        border: 1px solid #e5e6eb;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .xc_group_count:hover {
        background: #e5e6eb;
        border-color: #c9cdd4;
        color: #1d2129;
    }

    .xc_group_actions {
        display: flex;
        gap: 12px;
        align-items: center;
        cursor: pointer;
    }

    .xc_group_toggle {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #f2f3f5;
        border: 1px solid #e5e6eb;
        color: #4e5969;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .xc_group_toggle:hover {
        background: #e5e6eb;
        border-color: #165DFF;
        color: #165DFF;
    }

    .xc_group_toggle.expanded {
        transform: rotate(180deg);
        background: #165DFF;
        border-color: #165DFF;
        color: white;
    }

    /* 摄像头列表 */
    .xc_camera_list {
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
    }

    .xc_camera_list.expanded {
        padding: 4px;
        max-height: 800px;
        overflow: auto;
    }
    
    .xc_camera_table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .xc_camera_table th {
        padding: 6px 12px;
        text-align: left;
        font-weight: 500;
        color: #4E5969;
        font-size: 14px;
        border-bottom: 1px solid #E5E6EB;
        position: relative;
    }

    .xc_camera_table th::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 16px;
        right: 16px;
        height: 1px;
        background-color: #E5E6EB;
    }

    .xc_camera_table td {
        padding: 3px 4px;
        font-size: 14px;
        color: #272E3B;
        border-bottom: 1px solid #F2F3F5;
        transition: background-color 0.2s;
    }

    .xc_camera_table tr:last-child td {
        border-bottom: none;
    }

    .xc_camera_table tbody tr:hover {
        background-color: rgba(22, 93, 255, 0.03);
    }

    /* 状态标签 */
    .xc_status {
        padding: 4px 6px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .xc_status_running {
        background-color: rgba(0, 180, 42, 0.1);
        color: #2b542c;
    }

    .xc_status_stopped {
        background-color: rgba(245, 63, 63, 0.1);
        color: #F53F3F;
    }

    .xc_status_pending {
        background-color: rgba(255, 125, 0, 0.1);
        color: #FF7D00;
    }

    .xc_status_dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: currentColor;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    /* 美化布控状态徽章 */
    .xc_control-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 0;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }
    
    .xc_control-status-active {
        color: #059669;
    }
    
    .xc_control-status-inactive {
        color: #dc2626;
    }
    
    .xc_control-status-error {
        color: #ea580c;
    }
    
    .xc_status-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: currentColor;
        box-shadow: 0 0 8px currentColor;
        animation: xc_status-pulse 2s ease-in-out infinite;
    }
    
    @keyframes xc_status-pulse {
        0%, 100% {
            opacity: 1;
            box-shadow: 0 0 8px currentColor;
        }
        50% {
            opacity: 0.7;
            box-shadow: 0 0 4px currentColor;
        }
    }

    /* 操作按钮 */
    .xc_action_buttons {
        display: flex;
        gap: 8px;
    }

    .xc_action_btn {
        width: 28px;
        height: 30px;
        border-radius: 4px;
        background-color: #F2F3F5;
        border: none;
        color: #4E5969;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .xc_action_btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .xc_action_btn.view:hover {
        background-color: #165DFF;
        color: white;
        cursor: pointer;
    }

    .xc_action_btn.start:hover {
        background-color: #2b542c;
        color: white;
    }

    .xc_action_btn.stop:hover {
        background-color: #FF7D00;
        color: white;
    }

    .xc_action_btn.delete:hover {
        background-color: #F53F3F;
        color: white;
    }

    /* 分页 */
    .xc_pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .xc_pagination > .xc_page-btn {
        min-width: 36px;
        height: 36px;
        border-radius: 6px;
        border: 1px solid #ddd;
        background-color: white;
        color: #555;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .xc_pagination > .xc_page-btn:hover:not(.xc_active) {
        border-color: #34495e;
        color: #34495e;
    }
    
    .xc_pagination > .xc_page-btn.xc_active {
        background-color: #34495e;
        color: white;
    }
    
    .xc_pagination > .xc_page-info {
        font-size: 14px;
        color: #7f8c8d;
    }
</style>
{% endblock stylesheets %}

{% block content %}

  <div class="right_col" role="main">
    <div class="">
      <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
   <!-- xc page start -->
    <div class="xc_container">
        <div class="xc_toolbar">
            <div class="xc_page-title">
                <i class="fa fa-cube"></i>
                布控管理

            </div>
            
            <select id="search_status_select" class="xc_status-filter">
                <option value="-1">全部状态</option>
                <option value="1">布控中</option>
                <option value="0">未布控</option>
            </select>
            
            <input type="text" id="search_text_input" class="xc_search-input" placeholder="输入视频流名称"  value="{{ search_text }}">
            
            <button class="xc_btn-modern" onclick="doSearch()">
                <i class="fa fa-search"></i> 搜索
            </button>
            
            <button class="xc_btn-modern" onclick="window.location.href='/control/add'">
                <i class="fa fa-plus"></i> 添加
            </button>
            
            <button class="xc_btn-modern" onclick="f_openHandleAllControl('add')">
                <i class="fa fa-play"></i> 全部执行
            </button>
            
            <button class="xc_btn-modern" onclick="f_openHandleAllControl('cancel')">
                <i class="fa fa-pause"></i> 全部取消
            </button>
            
            <button class="xc_btn-modern" onclick="f_openHandleAllControl('delete')">
                <i class="fa fa-trash"></i> 全部删除
            </button>
            
            <div>

                <span id="top_loading" style="display: none; margin-left: 10px;">
                    <span class="xc_loading-spinner"></span>
                    <span class="xc_loading-text">加载中...</span>
                </span>
                <span id="top_msg">{{top_msg}}</span>

            </div>
        </div>

        <div class="xc_camera_groups"  id="data">
            <!-- item start -->

            <!-- item end -->
        </div>
    </div>
   <!-- xc page end -->
              </div>
        </div>
      </div>

    <div class="row">
        <div class="xc_pagination" id="pageData">
        </div>
    </div>

      <!--日志弹窗start -->
      <div id="control_log_dialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h4 class="modal-title">布控日志</h4>
              </div>
              <div class="modal-body">
                <div style="padding: 5px 20px;">
                  <!-- 查询条件 -->
                  <div class="form-inline" style="margin-bottom: 15px;">
                    <div class="form-group">
                      <label>布控编号：</label>
                      <input type="text" class="form-control input-sm" id="log_control_code_input" placeholder="留空查询所有" style="width: 200px;">
                    </div>
                    <button type="button" class="btn btn-primary btn-sm" onclick="f_searchLog(1)">
                      <i class="fa fa-search"></i> 查询
                    </button>
                    <button type="button" class="btn btn-default btn-sm" onclick="f_resetLogSearch()">
                      <i class="fa fa-refresh"></i> 重置
                    </button>
                  </div>
                  <!-- 表格 -->
                  <div style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th width="60">ID</th>
                          <th width="150">布控编号</th>
                          <th>日志内容</th>
                          <th width="150">时间</th>
                        </tr>
                      </thead>
                      <tbody id="control_log_data">
                      </tbody>
                    </table>
                  </div>
                  <!-- 分页 -->
                  <div class="xc_pagination" id="log_pageData" style="margin-top: 10px;"></div>
                </div>
              </div>
            </div>
          </div>
       </div>
      <!--日志弹窗end -->

       <!--复制弹窗start -->
      <div id="copy_dialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h4 class="modal-title" >复制布控</h4>
              </div>

              <div class="modal-body">
                <div style="padding: 5px 20px;">
                  <form class="form-horizontal calender" role="form">
                    <div class="form-group">
                          <label class="col-sm-3 control-label">布控编号</label>
                          <div class="col-sm-9">
                            <input type="text" readonly class="form-control" id="copy_code_input"/>
                          </div>
                    </div>

                   <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12">视频流</label>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                        <select id="copy_streams_select" style="height: 200px;"  class="select2_multiple form-control" required="required"  multiple="multiple" >
                            <option value="0">---请选择视频流(可多选)---</option>
                        </select>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">备注</label>
                      <div class="col-sm-9">
                        <textarea class="form-control" style="height:40px;" id="copy_remark_textarea"></textarea>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="f_openCopy()" class="btn btn-default">提交</button>
              </div>
            </div>
          </div>
       </div>
      <!--复制弹窗end -->

      <!--快捷设置弹窗start -->
      <div id="settings_dialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h4 class="modal-title" >快捷设置</h4>
              </div>

              <div class="modal-body">
                <div style="padding: 5px 20px;">
                  <form class="form-horizontal calender" role="form">
                   <div class="form-group">
                          <label class="col-sm-3 control-label">布控编号</label>
                          <div class="col-sm-9">
                            <input type="text" readonly class="form-control" id="settings_code_input"/>
                          </div>
                    </div>

                   <div class="form-group">
                      <label class="col-sm-3 control-label">报警间隔</label>
                      <div class="col-sm-9">
                        <input type="number" class="form-control" id="min_interval_input"/>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">OSD参数</label>
                      <div class="col-sm-9">
                        <textarea class="form-control" style="height:40px;" id="osd_params_textarea"></textarea>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">扩展参数</label>
                      <div class="col-sm-9">
                        <textarea class="form-control" style="height:60px;" id="extend_params_textarea"></textarea>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">修改范围</label>
                      <div class="col-sm-9">
                          <select id="modify_range_select"  class="form-control">
                            <option value="0">当前布控</option>
                            <option value="1">相同视频所有布控</option>
                            <option value="2">相同算法所有布控</option>
                            <option value="3">所有布控</option>
                        </select>
                      </div>
                    </div>

                  </form>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="f_openSettings()" class="btn btn-default">提交</button>
              </div>
            </div>
          </div>
       </div>
      <!--快捷设置弹窗end -->

    </div>
  </div>

{% endblock content %}

{% block javascripts %}
  {{ block.super }}

<script>
    let eleTopLoading = $("#top_loading");
    let eleTopMsg= $("#top_msg");
    let eleData = $("#data");
    let elePageData = $("#pageData");
    let eleSearchTextInput= $("#search_text_input");
    let eleSearchStatusSelect= $("#search_status_select");
    //布控日志弹窗
    let eleControlLogDialog = $("#control_log_dialog");
    let eleControlLogData = $("#control_log_data");
    let eleLogControlCodeInput = $("#log_control_code_input");
    let eleLogPageData = $("#log_pageData");
    let curLogPage = 1;
    let curLogPageSize = 10;
    //复制布控弹窗
    let eleCopyDialog = $("#copy_dialog");
    let eleCopyCodeInput = $("#copy_code_input");
    let eleCopyStreamsSelect= $("#copy_streams_select");
    let eleCopyRemarkTextarea= $("#copy_remark_textarea");
    //快捷设置弹窗
    let eleSettingsDialog = $("#settings_dialog");
    let eleSettingsCodeInput = $("#settings_code_input");
    let eleMinIntervalInput = $("#min_interval_input");
    let eleOsdParamsTextarea = $("#osd_params_textarea");
    let eleExtendParamsTextarea = $("#extend_params_textarea");
    let eleModifyRangeSelect = $("#modify_range_select");
    //临时辅助参数
    let curPage = 1;//当前页面
    let curPageSize = 10;
    
    // 搜索功能
    function doSearch() {
        curPage = 1;
        f_openIndex(curPage, curPageSize);
    }
    
    // 支持回车搜索
    eleSearchTextInput.on('keypress', function(e) {
        if (e.which === 13) {
            doSearch();
        }
    });
    
    // 状态筛选变化时自动搜索
    eleSearchStatusSelect.on('change', function() {
        doSearch();
    });

    function toggleGroup(actionsElement) {
        const headerElement = actionsElement.parentNode;
        const listElement = headerElement.nextElementSibling;
        const toggleIcon = headerElement.querySelector('.xc_group_toggle');

        listElement.classList.toggle('expanded');
        toggleIcon.classList.toggle('expanded');
    }

    function f_edit(controlCode) {
        window.location.href = '/control/edit?code=' + controlCode;
    }
    function f_openDel(controlCode) {
        let ret = confirm("确认删除吗？");
        if (ret){
            eleTopLoading.show();
            $.ajax({
                   url: '/control/openDel',
                   type: "post",
                   async: true,
                   data: {"code":controlCode},
                   dataType: "json",
                   timeout: 0,
                   error: function () {
                       eleTopLoading.hide();
                       myToast2025("网络异常，请确定网络正常！","error");
                   },
                   success: function (res) {
                          eleTopLoading.hide();
                       if(1000 === res.code){
                           f_openIndex(curPage,curPageSize);
                       }else{
                            myToast2025(res.msg,"error");
                       }
                   }
                });
        }
    }
    function f_openLog(controlCode) {
        // 打开弹窗
        eleControlLogDialog.modal("show");
        // 设置布控编号
        if (controlCode) {
            eleLogControlCodeInput.val(controlCode);
        } else {
            eleLogControlCodeInput.val("");
        }
        // 查询第一页
        f_searchLog(1);
    }
    
    // 查询日志
    function f_searchLog(page) {
        curLogPage = page;
        let controlCode = eleLogControlCodeInput.val().trim();
        
        eleTopLoading.show();
        $.ajax({
            url: '/control/openLog',
            type: "get",
            async: true,
            data: {
                "controlCode": controlCode,
                "p": page,
                "ps": curLogPageSize
            },
            dataType: "json",
            timeout: 0,
            error: function () {
                eleTopLoading.hide();
                myToast2025("网络异常，请确定网络正常！","error");
            },
            success: function (res) {
                eleTopLoading.hide();
                if(1000 === res.code){
                    eleControlLogData.html("");
                    let data = res.data;
                    let data_length = data.length;

                    if(0 === data_length){
                        let item_html = "";
                        item_html += "<tr>";
                        item_html += "<td colspan='4' style='text-align:center; color:#999;'>暂无日志</td>";
                        item_html += "</tr>";
                        eleControlLogData.append(item_html);
                    } else {
                        for (let i = 0; i < data_length; i++) {
                            let d = data[i];
                            let item_html = "";
                            item_html += "<tr>";
                            item_html += "<td>" + d["id"] + "</td>";
                            item_html += "<td>" + d["control_code"] + "</td>";
                            item_html += "<td style='word-break: break-all;'>" + d["content"] + "</td>";
                            item_html += "<td>" + d["create_time_str"] + "</td>";
                            item_html += "</tr>";
                            eleControlLogData.append(item_html);
                        }
                    }
                    
                    // 显示分页
                    f_show_logPageData(res.pageData);
                } else {
                    myToast2025(res.msg,"error");
                }
            }
        });
    }
    
    // 显示日志分页
    function f_show_logPageData(pageData) {
        let page_size = pageData["page_size"];
        let html = "";
        html += "<div class='xc_page-info'>共" + pageData["page_num"] + "页 / " + pageData["count"] + "条</div>";
        let pageLabels = pageData["pageLabels"];

        for (let i = 0; i < pageLabels.length; i++) {
            let cur = pageLabels[i]["cur"];
            if(cur === 1){
                html += "<div class='xc_page-btn xc_active'>" + pageLabels[i]["name"] + "</div>";
            } else {
                html += "<div class='xc_page-btn' onclick='f_searchLog(" + pageLabels[i]["page"] + ")'>" + pageLabels[i]["name"] + "</div>";
            }
        }
        eleLogPageData.html(html);
    }
    
    // 重置日志查询
    function f_resetLogSearch() {
        eleLogControlCodeInput.val("");
        f_searchLog(1);
    }
    function f_copy(controlCode) {
        eleTopLoading.show();
        $.ajax({
               url: '/open/getAllStreamData',
               type: "get",
               async: true,
               data: {},
               dataType: "json",
               timeout: 0,
               error: function () {
                   eleTopLoading.hide();
                   myToast2025("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   eleTopLoading.hide();
                   if(1000 === res.code){
                       let data = res.data;
                       let html = "<option value=\"0\">---请选择视频流(可多选)---</option>";
                       for (let i = 0; i < data.length; i++) {
                           let d = data[i];
                           let d_code = d["code"];
                           let d_nickname = d["nickname"];
                           html += "<option value=\""+d_code+"\">"+d_nickname+"</option>";
                       }
                       eleCopyDialog.modal("toggle");
                       eleCopyCodeInput.val(controlCode)
                       eleCopyRemarkTextarea.val("copy from "+controlCode)
                       eleCopyStreamsSelect.html(html);
                   }else{
                       myToast2025(res.msg,"error");
                   }
                }
            });

    }
    function f_openCopy() {
        let val = eleCopyStreamsSelect.val();//typeof object, array
        if(val===null){
            myToast2025("请至少选择1个摄像头","error");
            return false;
        }else{
            let vals = [];
            for (let i = 0; i < val.length; i++) {
                if("0"!==val[i]){
                    vals.push(val[i]);
                }
            }
            if(vals.length > 0){
                eleCopyDialog.modal("toggle");

                let controlCode = eleCopyCodeInput.val()
                let stream_codes = vals.join(",");
                let remark = eleCopyRemarkTextarea.val();
                eleTopLoading.show();
                $.ajax({
                       url: '/control/openCopy',
                       type: "post",
                       async: true,
                       data: {"controlCode":controlCode,"streamCodes":stream_codes,"remark":remark},
                       dataType: "json",
                       timeout: 0,
                       error: function () {
                           eleTopLoading.hide();
                           myToast2025("网络异常，请确定网络正常！","error");
                       },
                       success: function (res) {
                           eleTopLoading.hide();
                           if(1000 === res.code){
                               f_openIndex(curPage,curPageSize);
                           }else{
                                myToast2025(res.msg,"error");
                           }
                       }
                    });
            }else{
                myToast2025("请至少选择1个摄像头","error");
                return false;
            }
        }
    }
    function f_settings(controlCode) {
        eleTopLoading.show();
        $.ajax({
               url: '/open/getControl',
               type: "get",
               async: true,
               data: {"code":controlCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   eleTopLoading.hide();
                   myToast2025("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   eleTopLoading.hide();
                   if(1000 === res.code){
                       let min_interval = res.info["min_interval"];
                       let osd_params = res.info["osd_params"];
                       let extend_params = res.info["extend_params"];

                        eleSettingsDialog.modal("toggle");
                        eleSettingsCodeInput.val(controlCode)
                        eleMinIntervalInput.val(min_interval)
                        eleOsdParamsTextarea.val(osd_params)
                        eleExtendParamsTextarea.val(extend_params)
                        eleModifyRangeSelect.find('option[value="0"]').prop('selected', true);

                   }else{
                        myToast2025(res.msg,"error");
                   }
                }
            });
    }
    function f_openSettings() {
        eleSettingsDialog.modal("toggle");
        let controlCode = eleSettingsCodeInput.val();
        let min_interval = eleMinIntervalInput.val();
        let osd_params = eleOsdParamsTextarea.val();
        let extend_params = eleExtendParamsTextarea.val();
        let modify_range = eleModifyRangeSelect.val()

        eleTopLoading.show();
        $.ajax({
           url: '/control/openSettings',
           type: "post",
           async: true,
           data: {
               "code":controlCode,
               "min_interval":min_interval,
               "osd_params":osd_params,
               "extend_params":extend_params,
               "modify_range":modify_range
           },
           dataType: "json",
           timeout: 0,
           error: function () {
               eleTopLoading.hide();
               myToast2025("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               eleTopLoading.hide();
               if(1000 === res.code){
                    //成功
               }else{
                    myToast2025(res.msg,"error");
               }
           }
        });


    }
    function f_open_player(stream_app,stream_name){
        window.open("/stream/player?app="+stream_app+"&name="+stream_name);
    }
    function f_open_flow(code) {
        let url = "/algorithmFlow/index?search="+code;
        window.open(url);
    }
    function f_show_pageData(pageData) {
        let page_size = pageData["page_size"];
        let html = "";
        html+="<div class=\"xc_page-info\">共"+pageData["page_num"]+"页 / "+pageData["count"]+"条</div>";
        let pageLabels = pageData["pageLabels"];

        for (let i = 0; i < pageLabels.length; i++) {
            let cur = pageLabels[i]["cur"];
            //console.log("f_show_pageData",typeof cur,cur)
            if(cur === 1){
                html+="<div class=\"xc_page-btn xc_active\">"+pageLabels[i]["name"]+"</div>";
            }else{
                html+="<div class=\"xc_page-btn\" onclick=\"f_openIndex("+pageLabels[i]["page"]+","+page_size+")\" >"+pageLabels[i]["name"]+"</div>";
            }
        }
        elePageData.html(html);
    }
    function f_openIndex(page,page_size) {
        curPage = page;
        curPageSize = page_size;
        let search_text = eleSearchTextInput.val().trim();
        let search_status = eleSearchStatusSelect.val();
        eleTopLoading.show();
        $.ajax({
               url: '/control/openIndex',
               type: "get",
               async: true,
               data: {"p":page,"ps":page_size,"search_text":search_text,"search_status":search_status},
               dataType: "json",
               timeout: 0,
               error: function () {
                   eleTopLoading.hide();
                   myToast2025("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   eleTopLoading.hide();
                   if(res.code === 1000)
                   {
                       let data = res.data;

                       if(data.length === 0){
                            eleData.html("<div class='xc_empty-state'><i class='fa fa-video-camera'></i><p>暂无数据</p></div>");
                            f_show_pageData(res.pageData)
                       }else{
                            eleData.html("");
                            for (let k = 0; k < data.length ; k++) {
                                let dd = data[k];
                                let dd_length = dd.length;
                                let d0 = dd[0];

                                let title;
                                if(d0["stream_active"] === 1){
                                    title= "<div class='xc_stream_status_container'><span class='xc_play_btn' onclick=\"f_open_player('"+d0["stream_app"]+"','"+d0["stream_name"]+"')\" ><i class='fa fa-play-circle'></i>播放</span><a class='xc_group_title_a' href=\"javascript:f_search('"+d0["stream_nickname"]+"')\" >"+d0["stream_nickname"]+"</a></div>";
                                }else{
                                    title= "<div class='xc_stream_status_container'><span class='xc_offline_status'><i class='fa fa-warning'></i>离线</span><a class='xc_group_title_a' href=\"javascript:f_search('"+d0["stream_nickname"]+"')\" >"+d0["stream_nickname"]+"</a></div>";
                                }
                                let item_html = "<div class=\"xc_group\">";
                item_html+="<div class=\"xc_group_header\">";
                    item_html+="<div class=\"xc_group_title\">"+title+"<span class=\"xc_group_count\">"+dd_length.toString()+"</span></div>";
                    item_html+="<div class=\"xc_group_actions\" onclick=\"toggleGroup(this)\">";
                        item_html+="<div class=\"xc_group_toggle\">";
                            item_html+="<svg class=\"xc-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"/></svg>";
                        item_html+="</div>";
                    item_html+="</div>";
                item_html+="</div>";
                item_html+="<div class=\"xc_camera_list expanded\">";
                    item_html+="<table class=\"xc_camera_table\">";
                        item_html+="<thead>";
                            item_html+="<tr>";
                                item_html+="<th>ID</th>";
                                item_html+="<th>编号</th>";
                                item_html+="<th>算法流</th>";
                                item_html+="<th>算法</th>";
                                item_html+="<th>计算频率</th>";
                                item_html+="<th>状态</th>";
                                item_html+="<th>时间</th>";
                                item_html+="<th>操作</th>";
                            item_html+="</tr>";
                        item_html+="</thead>";
                        item_html+="<tbody>";
                               for (let i = 0; i < dd_length; i++) {
                                    let d = dd[i];
                                   item_html+="<tr>";
                                item_html+="<td>"+d["id"]+"</td>";
                                item_html+="<td style='width:15%;'>"+d["code"]+"</td>";
                                item_html+="<td><a class='sun-a-label' style='font-size: 12px;' href=\"javascript:f_open_player('"+d["push_stream_app"]+"','"+d["push_stream_name"]+"')\" ><i class=\"fa fa-play\"></i> 算法流</a></td>";
                                item_html+="<td style='width:20%;'>";
                                   if(d["flow_nickname"] === 0){//业务算法已被删除
                                        item_html += "<span class='sun-state-error'>已删除</span>";
                                    }else{
                                        //显示业务算法
                                        let flow_mode = d["flow_mode"];
                                        let flow_deploy_process_index = d["flow_deploy_process_index"];
                                        let flow_max_concurrency = d["flow_max_concurrency"];
                                        let flow_concurrency_unit_length = d["flow_concurrency_unit_length"];
                                        let base = flow_deploy_process_index+"/"+flow_max_concurrency+"/"+flow_concurrency_unit_length;

                                        item_html += "<a class='sun-a-label' href=\"javascript:f_open_flow('"+d["flow_code"]+"')\" >("+base+") "+d["flow_nickname"]+"</a>";
                                    }
                                item_html += "</td>";
                                item_html+="<td>"+d["checkFps"]+"</td>";

                                item_html += "<td class='cur_state_" + d["code"] + "'>";
                                   if(d["cur_state"] === 0){
                                       item_html += "<span class='xc_control-status xc_control-status-inactive'><span class='xc_status-icon'></span>未布控</span>";
                                   }else if(d["cur_state"] === 1){
                                        item_html += "<span class='xc_control-status xc_control-status-active'><span class='xc_status-icon'></span>布控中</span>";
                                   }else if(d["cur_state"] === 5){
                                        item_html += "<span class='xc_control-status xc_control-status-error'><span class='xc_status-icon'></span>布控中断</span>";
                                   }else{
                                        item_html += "<span class='xc_control-status xc_control-status-inactive'><span class='xc_status-icon'></span>未知状态</span>";
                                   }
                                  item_html += "</td>";

                                  item_html += "<td>"+d["last_update_time"]+"</td>";

                                item_html+="<td class=\"xc_action_buttons\">";
                                    if(1===d["cur_state"]) {//布控中
                                        item_html += "<button data-code='" + d["code"] + "'  data-handle='cancel' onclick=\"f_openHandleControl(this)\" class=\"btn btn-dark btn-sm\">取消布控</button>";
                                    }else{
                                        item_html += "<button data-code='" + d["code"] + "'  data-handle='add' onclick=\"f_openHandleControl(this)\" class=\"btn btn-default btn-sm\">执行布控</button>";
                                    }

                                    item_html+="<button class='xc_action_btn view' onclick=\"f_edit('"+d["code"]+"')\" title=\"编辑\"><i class=\"fa fa-edit\"></i></button>";
                                    item_html+="<button class='xc_action_btn view' onclick=\"f_settings('"+d["code"]+"')\" title=\"快捷设置\"><i class=\"fa fa-gear\"></i></button>";
                                    item_html+="<button class='xc_action_btn view' onclick=\"f_copy('"+d["code"]+"')\"  title=\"复制\"><i class=\"fa fa-copy\"></i></button>";
                                    item_html+="<button class='xc_action_btn view' onclick=\"f_openLog('"+d["code"]+"')\"  title=\"日志\"><i class=\"fa fa-chain\"></i></button>";
                                    item_html+="<button class='xc_action_btn delete' onclick=\"f_openDel('"+d["code"]+"')\"  title=\"删除\"><i class=\"fa fa-trash\"></i></button>";

                                item_html+="</td>";
                            item_html+="</tr>";
                               }
                        item_html+="</tbody>";
                    item_html+="</table>";
                item_html+="</div>";
            item_html+="</div>";

                                eleData.append(item_html);
                           }
                            f_show_pageData(res.pageData)
                       }

                   }
                   else
                   {
                       eleData.html("<div class='xc_empty-state'><i class='fa fa-exclamation-triangle'></i><p>"+res.msg+"</p></div>");
                       f_show_pageData(res.pageData);
                   }
               }
            });
    }

    function f_getAllCoreProcessData2() {
        eleTopMsg.html("...");
        $.ajax({
               url: '/open/getAllCoreProcessData2',
               type: "get",
               async: true,
               data: {},
               dataType: "json",
               timeout: 0,
               error: function () {
                   myToast2025("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   if(1000 === res.code) {
                       let info = res.info
                       let __controlCount = info["controlCount"]
                       let __streamCount = info["streamCount"]
                       let html = "总视频"+__streamCount+"条，总布控"+__controlCount+"条";
                       eleTopMsg.html(html);
                   }else{
                       let msg = res.msg;
                       eleTopMsg.html(msg);
                   }
               }
            });
    }
    function f_openHandleAllControl(handle) {
        //执行全部布控 或 取消全部布控
        let msg = "";
        if(handle === "add"){
            msg = "确认全部执行吗？";
        }else if(handle === "cancel"){
            msg = "确认全部取消吗？";
        }else if(handle === "delete"){
            msg = "确认全部删除吗？";
        }else{
            return;
        }
        let ret = confirm(msg);
        if (ret) {
            eleTopLoading.show();
            $.ajax({
                   url: '/control/openHandleAllControl',
                   type: "post",
                   async: true,
                   data: {"handle":handle, "state":10},
                   dataType: "json",
                   timeout: 0,
                   error: function () {
                       eleTopLoading.hide();
                       myToast2025("网络异常，请确定网络正常！","error");
                   },
                   success: function (res) {
                        eleTopLoading.hide();
                        f_getAllCoreProcessData2();

                        if(1000 === res.code){
                            myToast2025(res.msg,"success",1000);
                            setTimeout(function () {
                                f_openIndex(curPage,curPageSize);
                            }, 1000);
                       }else{
                            myToast2025(res.msg,"error");
                       }
                   }
                });
        }

    }
    function f_openHandleControl(obj) {
        //obj.getAttribute("data-handle"); // js 获取 data-handle属性
        //obj.setAttribute("data-handle","123") // js 修改 data-handle属性
        let jqueryObj = $(obj);
        let handle = jqueryObj.data("handle");
        //jqueryObj.data("handle","123");
        let code = jqueryObj.data("code");

        let url;
        if(handle === "add"){
            url = "/control/openStartControl";
        }else if(handle === "cancel"){
            url = "/control/openStopControl";
        }else{
            return;
        }
        eleTopLoading.show();
        $.ajax({
           url: url,
           type: "post",
           async: true,
           data: {"code":code},
           dataType: "json",
           timeout: 0,
           error: function () {
                eleTopLoading.hide();
                myToast2025("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               eleTopLoading.hide();

               f_getAllCoreProcessData2();

               if(res.code === 1000){
                   myToast2025(res.msg,"success",2000);

                   if(handle === "add"){
                       jqueryObj.removeClass("btn-default")
                       jqueryObj.addClass("btn-dark")
                       jqueryObj.data("handle","cancel");
                       jqueryObj.html("取消布控");

                        //布控成功
                       $(".cur_state_"+code).html("<span class='xc_control-status xc_control-status-active'><span class='xc_status-icon'></span>布控中</span>");
                       //$(".menu_"+code).hide();

                   }else if(handle === 'cancel'){
                       jqueryObj.removeClass("btn-dark")
                       jqueryObj.addClass("btn-default")
                       jqueryObj.data("handle","add");
                       jqueryObj.html("执行布控")
                       //取消布控成功
                       $(".cur_state_"+code).html("<span class='xc_control-status xc_control-status-inactive'><span class='xc_status-icon'></span>未布控</span>")
                       //$(".menu_"+code).show();
                   }
               }else{
                   myToast2025(res.msg,"error");
               }
           }
        });
    }
    function f_reload() {
        f_openIndex(curPage,curPageSize);
    }
    function f_search(name) {
        eleSearchTextInput.val(name);
        curPage = 1;
        f_openIndex(curPage,curPageSize);

    }
    eleSearchTextInput.on("keydown",function(e){
        if (e.key === 'Enter' || e.keyCode === 13) {
            e.preventDefault(); // 阻止默认行为，例如表单提交
            doSearch();
        }
    })
    window.onload = function (){
        f_openIndex(curPage,curPageSize);
        f_getAllCoreProcessData2();

    };


</script>
{% endblock javascripts %}

